<template>
  <ul class="tab-cart">
    <li
      v-for="(item, index) in tabList"
      :class="{ active: index == i }"
      :key="index"
      @click="cut(index)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>
<script>
import { ref } from "vue";
export default {
  props: {
    tabList: Array,
  },
  setup(props,{emit}) {
    //   console.log(ctx);
    //   console.log(props.tabList);
    const i = ref(0);
    const cut = (val) => {
      i.value = val;
       emit('tabCut',val); // 子传父
    };
    return {
      i,
      cut,
    };
  },
};
</script>
<style lang="scss" scoped>
.tab-cart {
  height: 50px;
  display: flex;
  align-items: center;
  background: #440f7d;
  color: #fff;
  li {
    width: 20%;
    text-align: center;
    line-height: 50px;
  }
  .active {
    background: #8c3ec3;
  }
}
</style>